<template>
  <div class="box">
    <div id="myCharts" style="width: 100%; height: 420px;">
    </div>
  </div>
</template>

<script>
import { EleResize } from '@/util/esresize.js';
export default {
  data() {
    return {
      screenWidth: '',
      dataTitle: [],
      dataSendSalaryMoney: [],
      TakeHomePayMoney: [],
      DeparPeopleCount: []
    };
  },
  props: {
    departDetialsList: {
      type: Array
    }
  },
  watch: {
    departDetialsList: {
      deep: true,
      handler(newold) {
        this.dataTitle = newold.map(item => item.departName);
        this.dataSendSalaryMoney = newold.map(idx => idx.shouldSendSalaryMoney != 0 ? idx.shouldSendSalaryMoney / 10000 : 0);
        this.TakeHomePayMoney = newold.map(item => item.takeHomePayMoney != 0 ? item.takeHomePayMoney / 10000 : 0);
        this.DeparPeopleCount = newold.map(item => item.deparPeopleCount);
        this.drawLine();
      }
    }
  },
  methods: {
    drawLine() {
      // 初始化Echarts实例
      let myChart = this.$echarts.init(document.getElementById('myCharts'));
      let resizeDiv = document.getElementById('myCharts');

      // 绘制图表
      myChart.setOption({
        // title: { text: '在Vue中简单使用Echarts' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          //   feature: {
          //     // dataView: { show: true, readOnly: false },
          //     // magicType: { show: true, type: ['line', 'bar'] }, //动态类型切换 示例
          //     // restore: { show: true },
          //   }
        },
        legend: {
          data: ['应发薪资', '实发薪资', '计薪人数']
        },
        xAxis: [
          {
            type: 'category',
            data: this.dataTitle,
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#cccccc', // 颜色
                width: 1 // 粗细
              }
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: '#99999',
                fontSize: 16
              },
            }
          }
        ],

        yAxis: [
          {
            type: 'value',
            name: '(万元)  ',
            min: 0,
            max: 50,
            interval: 10,

            // 坐标轴名称与轴线之间的距离。
            nameGap: 20,
            axisLabel: {
              formatter: '{value} '
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            name: '人',
            // 坐标轴名称与轴线之间的距离。
            nameGap: 20,
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '应发薪资',
            type: 'bar',
            barWidth: '18px', //柱状图宽度
            data: this.dataSendSalaryMoney,
            itemStyle: {
              normal: {
                //这里是重点
                color: '#3BA1FF'
              }
            }
          },
          {
            name: '实发薪资',
            barWidth: '18px', //柱状图宽度
            type: 'bar',
            data: this.TakeHomePayMoney,
            itemStyle: {
              normal: {
                //这里是重点
                color: '#4FCB74'
              }
            }
          },
          {
            name: '计薪人数',
            type: 'line',
            smooth: true, //true就是曲线，false就是折线，默认false
            yAxisIndex: 1,
            data: this.DeparPeopleCount,
            itemStyle: {
              normal: {
                //这里是重点
                color: '#FBD850'
              }
            }
          }
        ]
      });

      let listener = function () {
        myChart.resize();
      };
      EleResize.on(resizeDiv, listener);
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  padding-top: 40px;
}
</style>